<template>
  <div class="styleList">
    <my-header>分类商品</my-header>
    <van-empty v-if="list.length==0" description="暂无数据" />
    <ul>
        <li v-for="(item,index) in list" :key="index">
            <img :src="item.pic" alt="">
            <p>{{item.name}}</p>
            <b style="color:red">￥{{item.minPrice}}</b>
        </li>
    </ul>
  </div>
  
</template>

<script>
import { reactive, toRefs } from "vue";
import myHeader from '../../components/myHeader.vue';
import { getGoodList } from '../../api/second/second';
import { useRoute } from 'vue-router';
export default {
  components: { myHeader },
  setup() {
    const route = useRoute();
    const data = reactive({
        list:[], // 列表的数据
    })
    let id = route.params.id;
    getGoodList({id:id}).then(res => {
    //   console.log(res);
      data.list = res.data.filter(item => item.categoryId == id);
    })
    return{
      ...toRefs(data)
    }
  },
};
</script>
<style lang="scss" scoped>
.styleList{
  height: 100%;
  background: #fff;
  ul{
    height: calc(100% - 100px);
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px;
    li{
      width: 48%;
      font-size: 28px;
      margin-bottom: 20px;
      img{
        width: 100%;
        height: 544px;
      }
    }
  }
}
</style>